<template>
  <div class="content">
    <div v-for="(item, index) in list" :key="index" class="item" @click="item_click(index)">
      <img class="item_img" :src="item.zxlogo" />
      <div class="AppName">
        <!-- {{ item.nickname + '——' +item.appTypeDes}} -->
        <p>{{item.nickname}}</p>
        <p>{{item.appTypeDes}}</p>
      </div>
      <img v-if="c_selectIndex == index" src="../../../static/application/icon_Success_NormalEdition.png"
        class="item_select" />
    </div>
  </div>
</template>

<script>
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        list: [],
        c_selectIndex: -1,
        c_forAppid: -1,
      };
    },
    props: ["appID"],
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
      appID(val) {
        this.appID = val;
        this.getList();
      },
    },
    //方法集合
    methods: {
      getList() {
        var params = new URLSearchParams();
        params.append("appid", this.appID);
        this.$post(this.API.Application_getHBList, params).then((res) => {
          if (res) {
            this.list = res.data;
          }
        });
      },
      //item点击事件
      item_click(index) {
        if (this.c_selectIndex == index) {
          this.c_selectIndex = -1;
          return;
        }
        this.c_selectIndex = index;
        this.c_forAppid = this.list[index]['id'];
        this.$emit("forAppid", this.c_forAppid);
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
  };

</script>
<style scoped>
  .content {
    display: flex;
    flex-wrap: wrap;

  }

  .item {
    display: flex;
    flex-direction: column;
    width: 110px;
    align-items: center;
    position: relative;
    border-radius: 8px;
    min-height: 130px;
    margin-right: 40px;
  }

  .item_img {
    width: 110px;
    height: 110px;
  }

  .item_select {
    width: 100%;
    /* height: 100%; */
    position: absolute;
    top: 0pt;
    bottom: 0pt;
    border-radius: 8px;
  }

  .AppName {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #000;
  }

  .AppName p {
    margin: 0px;
  }

  .AppName p:first-child {
    font-weight: 600;
  }

</style>
